<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:tiles="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org" lang="en">

<head>

<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- This <head> section is only used for static prototyping purposes. At runtime, -->
<!-- Tiles will only use the body fragment defined with tiles:fragment="content",  -->
<!-- as specified at the corresponding views.xml file.                             -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->

<title>SAR: Sistema de Atención de Requerimientos</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" type="text/css" media="screen, projection"
	href="../static/styles/blueprint/screen.css" />

<link rel="stylesheet" type="text/css" media="print"
	href="../static/styles/blueprint/print.css" />

<link rel="stylesheet" type="text/css" media="screen" href="../static/styles/booking.css" />

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" th:src="@{/resources/demos/style.css}"/>
<script>
  $(function() {  
    $( "#from" ).datepicker({
      dateFormat: "dd/mm/yy",
      onClose: function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to" ).datepicker({
      dateFormat: "dd/mm/yy",
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });
  });
</script>

<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  -->
<!-- Some styles and scripts are served from spring-js-resources-{ver}.jar at -->
<!-- runtime. Therefore not available for static prototyping. See the         -->
<!-- layouts/standard.html template file for detail.                          -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  -->
</head>

<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- START of the content to be included in the execution result.  -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- Only the markup inside this <body> would be required in this  -->
<!-- template if no static prototyping was intended.               -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<body tiles:fragment="content">
 	<div>
		<h5>
			<p th:text="#{consultarSolicitudes.busquedadesolicitudes}">Búsqueda de Solicitudes</p>
		</h5>
		<hr />
		
		<h2>
			<p th:text="#{consultarSolicitudes.titulo}">Consulta de Solicitudes</p>
		</h2>

		<div>
			<form action="#" th:object="${solicitud}" th:action="@{/consultarSolicitudes}"
				method="post" class="inline">
           	    
           	    <div class="error" th:if="${flagIdError} OR ${flagFechaError}">
                  <span th:if="${flagIdError}" th:errors="*{id}">Entrada incorrecta</span>
                  <span th:if="${flagFechaError}" th:errors="*{fechaBusquedaInicio}">Entrada incorrecta <br/></span>
                  <span th:if="${flagFechaError}" th:errors="*{fechaBusquedaFin}">Entrada incorrecta</span>
           	    </div>
				
				<fieldset>
				<legend th:text="#{consultarSolicitudes.filtrosdebusqueda}">Filtros de Búsqueda</legend>
					<div>
					<div class="span-5">
						<input type='checkbox' class="pChk"	id="pChk" th:field="*{porNumero}" />
						<label th:text="#{consultarSolicitudes.porNumeroSolicitud}" for="pChk">Por	número de solicitud</label>						
					</div>
					<div class="span-12 last">
						<span id="inputExacta" class="inputExacta" style="display: none;">
							<label th:text="#{consultarSolicitudes.numero}">Número </label>
							<input type="text" id="id" th:field="*{id}" />
						</span>					
						<script type="text/javascript">
						$(document).ready(function(){
						    $('#pChk').change(function(){
						        if(this.checked)
						            $('#inputExacta').fadeIn('fast');
						        else
						            $('#inputExacta').fadeOut('fast');

						    });
						});
						</script>
					</div>
					<br/>						
					</div>
					<div>
					<div class="span-5">
						<label for="areaSolicitante" th:text="#{consultarSolicitudes.areaSolicitante}">Area solicitante:</label>						
						<select th:field="*{areaSolicitante.id}">
						  <option th:value="0" th:text="#{consultarSolicitudes.areaTodos}">Todos</option>
						  <option th:each="area : ${allAreas}" 
						          th:value="${area.id}" 
						          th:text="${area.nombre}">AreaSolicitante</option>
						</select>
					</div>
					<div class="span-12 last">
						<label for="estado" th:text="#{consultarSolicitudes.estado}">Estado:</label>						
						<select th:field="*{estado}">
						<option selected="selected" value="Todos">Todos</option>
					    <option value="Registrado">Registrado</option>
					    <option value="Verificado">Verificado</option>
					    <option value="Aprobado">Aprobado</option>
					    <option value="Estimado">Estimado</option>
					    <option value="En proceso">En proceso</option>
					    <option value="Cerrado">Cerrado</option>
					    <option value="Cancelado">Cancelado</option>
					    <option value="En Control de Cambio">En Control de Cambio</option>
					    <option value="Pendiente de Aprobacion">Pendiente de Aprobacion</option>
					    <option value="Planificado">Planificado</option>
					    <option value="Cancelado">Planificado</option>
						</select>
					</div>
					</div>
					<br/>
					<div>
					<div class="span-5">
					<label th:text="#{consultarSolicitudes.fechaDeRegistro}">Fecha de Registro</label>
					</div>
					<div class="span-12 last">
					<label th:text="#{consultarSolicitudes.desde}" for="from">Desde:</label>
					<input type="text" id="from" name="from" th:field="*{fechaBusquedaInicio}" readonly="readonly"/>					
					<label th:text="#{consultarSolicitudes.hasta}" for="to">Hasta:</label>
					<input type="text" id="to" name="to" th:field="*{fechaBusquedaFin}" readonly="readonly"/>
					</div>          
	                </div>
	                <br/>
				<button type="submit" th:text="#{consultarSolicitudes.buscar}">Buscar solicitudes</button>
						
				</fieldset>
			</form>		
		</div>				
			<div id="resultadoSolicitudes" th:if="${listaSolicitudes}">
			<fieldset>
			<legend th:text="#{consultarSolicitudes.resultadoDeBusqueda}">Resultado de Búsqueda</legend>
				  <div>
				  
				    <table class="summary">
				        <thead>
				            <tr>
				                <th th:text="#{consultarSolicitudes.resultado.nro}">Nro</th>
				                <th th:text="#{consultarSolicitudes.resultado.area}">Area</th>
				                <th th:text="#{consultarSolicitudes.resultado.estado}">Estado</th>
				                <th th:text="#{consultarSolicitudes.resultado.fechaEsperada}">Fecha esperada</th>
				                <th th:text="#{consultarSolicitudes.resultado.accion}">Acción</th>
				            </tr>
				        </thead>
				        <tbody>
				            <tr th:each="solicitud : ${listaSolicitudes}">
				                <td th:text="${solicitud.id}">354</td>
				                <td th:text="${solicitud.areaSolicitante.nombre}">Logistica</td>
				                <td th:text="${solicitud.estado}">Registrado</td>
				                <td th:text="${#dates.format(solicitud.fechaEsperada, #messages.msg('date.format'))}">10/10/2013</td>
				                <td><a href="#" th:href="@{'consultaSolicitud/' + ${solicitud.id}}">Ver detalles</a></td>
				            </tr>
				            <tr th:if="${listaSolicitudes.isEmpty()}">
				                <td colspan="5" th:text="#{consultarSolicitudes.noResultados}">No se encontraron solicitudes</td>
				            </tr>
				        </tbody>
				    </table>
				  </div>				  
				</fieldset>				
				</div>
				<div>
				<form th:action="@{registrarSolicitud}" >
					<button type="submit" th:value="#{consultarSolicitudes.botonRegistrar}">Registrar Solicitud</button>
				</form>
				</div> 
			</div>
</body>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- END of the content to be included in the execution result -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->

</html>
